---
title: "Color Picker"
description: A versatile UI component that provides multiple ways to choose colors, including sliders, swatches, and manual input.
order: 1
published: true
references: ["https://react-spectrum.adobe.com/react-aria/ColorPicker.html"]
---

## Basic
The basic color picker allows users to select a color.
<How className='min-w-40' toUse="colors/color-picker/color-picker-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/color-picker
```

## Composed components
<Composed components={[
  'color-picker',
  'popover',
  'button',
  'color-swatch',
  'color-area',
  'color-slider',
  'color-thumb',
  'color-field',
  'input',
]}/>

## Manual installation
```bash
npm i react-aria-components @heroicons/react
```
<SourceCode toShow='color-picker'/>

## Anatomy
```
import { ColorPicker } from "@/components/ui/color-picker";
import { Popover, PopoverBody, PopoverContent } from "@/components/ui/popover";
import { Button } from "@/components/ui/button";
import { ColorSwatch } from "@/components/ui/color-swatch";
import { ColorArea } from "@/components/ui/color-area";
import { ColorSlider, ColorSliderTrack } from "@/components/ui/color-slider";
import { ColorThumb } from "@/components/ui/color-thumb";
import { ColorField } from "@/components/ui/color-field";
import { Input } from "@/components/ui/input";
```
```
<ColorPicker defaultValue="rgb(120,140,200)">
  <Popover>
    <Button intent="plain" data-slot="control">
      <ColorSwatch />
      Select color
    </Button>
    <PopoverContent className="[--gutter:--spacing(1)]">
      <PopoverBody>
        <div className="space-y-(--gutter)">
          <ColorArea
            colorSpace="rgb"
            defaultValue="rgb(120,140,200)"
            xChannel="red"
            yChannel="green"
            xName="red"
            yName="green"
          />
          <ColorSlider colorSpace="hsb" channel="hue">
            <ColorSliderTrack>
              <ColorThumb />
            </ColorSliderTrack>
          </ColorSlider>
          <ColorField aria-label="Color">
            <Input />
          </ColorField>
        </div>
      </PopoverBody>
    </PopoverContent>
  </Popover>
</ColorPicker>
```

## Controlled
Control the selected color with the `value` prop to sync it with your application's state.
<How className='min-w-40' toUse="colors/color-picker/color-picker-controlled-demo" />

## Disabled
Disable the color picker by setting the `isDisabled` prop, making it non-interactive.
<How className='min-w-40' toUse="colors/color-picker/color-picker-disabled-demo" />
